<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title> 计算属性及应用分析</title>
		<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		<div id="app">
			<div id="">
				<h1>{{ }}</h1>
				<p>
					<span>{{a}}</span>
					<span>{{sym}}</span>
					<span>{{b}}</span>
					<span>=</span>
					<span>{{result}}</span>
				</p>
				<div id="">
					
					<input type='null' v-model='a'></input>
					<input type='null' v-model='b'></input>
				</div>
				<div id="">
					<button type="button" @click='compute("plus")'>+</button>
					<button type="button" @click='compute("minus")'>-</button>
					<button type="button" @click='compute("mul")'>*</button>
					<button type="button" @click='compute("div")'>/</button>
				</div>
			</div>
		</div>
	<script type="text/javascript">
		/**
		 *  计算属性:解决模板中复杂的逻辑运算的问题
		 * 	计算属性只在内部逻辑以来的数据发生变化的时候才会再次调用
		 * 	计算属性会缓存其依赖的上一次计算出的数据结果
		 * 	多次复用相同的值的数据，计算属性只调用一次
		 * 	1.模板逻辑样式尽可能的绝对分离
		 *  2.逻辑计算结果要被复用
		 * */
		
		var vm = new Vue({
			el: '#app',
			data() {
				return {
					a:1,
					b:2,
					type:'plus'
				}
			},
			computed:{
				// 默认为get
				sym(){
					switch (this.type){
						case 'plus':
							return '+';
						case 'minus':
							return '-';
						case 'mul':
							return '*'
						case 'div':
							return '/';
						default:
							return '+';
					}
				},
				result:{
					get(){
						const a= Number(this.a);
						const b =Number(this.b);
						switch (this.type){
							case 'plus':
								return a + b;
							case 'minus':
								return a - b;
							case 'mul':
								return a * b;
							case 'div':
								return a / b;
							default:
								return '+';
						}
					},
					set(){}
				}
			},
			methods: {
				compute(a){
					this.type = a;
				},
				getResult(){
					const a= Number(this.a);
					const b =Number(this.b);
					switch (this.type){
						case 'plus':
							return a + b;
						case 'minus':
							return a - b;
						case 'mul':
							return a * b;
						case 'div':
							return a / b;
						default:
							return '+';
					}
				}
			}
		})
	</script>
	</body>
</html>
